<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>code assembly</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.4.4.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<script src="../../ui/jquery.ui.menu.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	form label {
	display: block;
	padding: 5px 0;
	}
	user agent stylesheetlabel {
	cursor: default;
	}
	#menu {  float: right; }
	#gallery { float: left; min-height: 400px; } * html #gallery { height: 12em; } /* IE6 */
	.gallery.custom-state-active { background: #eee; }
	.gallery li { float: left; width: 200px;height:200px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
	.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
	.gallery li a { float: right; }
	.gallery li a.ui-icon-zoomin { float: left; }
	.gallery li img { width: 100%; cursor: move; }

	.gallery li textarea { width: 90%;height:75%; cursor: move; }
	#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} 
		.ui-menu { width: 200px; position: absolute; }
	form p {
		margin: 2px;
	}
	

	
	</style>
	<script>	
	var  cur_insert_code_id = 5;
	var dragObject;
	$(function() {
		$( "#accordion" ).accordion({
			fillSpace: true
		});
		
		
		
	});
	

	$(function() {
		$( "#accordionResizer" ).resizable({
			minHeight: 500,
			resize: function() {
				$( "#accordion" ).accordion( "resize" );
			}
		});
	});
	$(function() {
		$( "#tabs" ).tabs();	

	});
	$(function() {
		$( "#dialog-assembly-confirm" ).dialog({
			autoOpen: false,
			height:140,
			modal: true,
			buttons: {
				"确定": function() {
					dragObject.fadeOut();
					$( this ).dialog( "close" );
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			}
		});
		
		$( "#dialog-submit-confirm" ).dialog({
			autoOpen: false,
			height:140,
			modal: true,
			buttons: {
				"确定": function() {
					addCode($("#insert_title").val(),$("#insert_code").val());
					
					$( this ).dialog( "close" );
					var evt = document.createEvent("MouseEvents"); 
					evt.initEvent("click", false, false); 
					$("#head_1").get(0).dispatchEvent(evt)
					
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			}
		});
		
		
	});
	$(function() {
		$( "#code_submit" ).button().click(function() {
			$( "#dialog-submit-confirm" ).dialog ("open");
		});
	});
	$(function() {
		$( "#btn" ).toggle(
			function() {
				$( "#test" ).animate({
					backgroundColor: "#aa0000",
					color: "#fff",
					width: 500,
					left:"100px"
					
				}, 1000 );
			},
			function() {
				$( "#test" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					width: 240,
					top:"-=10"
				}, 1000 );
			}
		);
	});
	$(function() {
		$(".demo button").button({
			icons: {
				primary: "ui-icon-home",
				secondary: "ui-icon-triangle-1-s"
			}
		}).each(function() {
			$(this).next().menu({
				select: function(event, ui) {
					$(this).hide();
					$("#log").append("<div>Selected " + ui.item.text() + "</div>");
				},
				input: $(this)
			}).hide();
		}).click(function(event) {
			var menu = $(this).next();
			if (menu.is(":visible")) {
				menu.hide();
				return false;
			}
			menu.menu("deactivate").show().css({top:0, left:0}).position({
				my: "left top",
				at: "right top",
				of: this
			});
			$(document).one("click", function() {
				menu.hide();
			});
			return false;
		})
	});
	$(function() {
		// there's the gallery and the trash
		var $gallery = $( "#gallery" ),
			$trash = $( "#trash" );
		// let the gallery items be draggable
		$( "li", $gallery ).draggable({
			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
			revert: "invalid", // when not dropped, the item will revert back to its initial position
			helper: "clone",
			cursor: "move",
			containment: "container"
			
		});

		// let the trash be droppable, accepting the gallery items


		$( "li", $gallery ).droppable({
			accept: "#gallery  li",
			activeClass: "ui-state-highlight",
			drop: function( event, ui ) {
				deleteImage( ui.draggable ,ui.offset);
			}
		});
		
		// let the gallery be droppable as well, accepting items from the trash


		// image deletion function
		var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";


		// image recycle function
		var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
		function recycleImage( $item ) {
			$item.fadeOut(function() {
				$item
					.find( "a.ui-icon-refresh" )
						.remove()
					.end()
					.css( "width", "96px")
					.append( trash_icon )
					.find( "img" )
						.css( "height", "72px" )
					.end()
					.appendTo( $gallery )
					.fadeIn();
			});
		}

		// image preview function, demonstrating the ui.dialog used as a modal window
		function viewLargerImage( $link ) {
			var title = $link.siblings( "h5" ).text(),
				content = $link.siblings( "textarea").text();

			var code = $( "<textarea  width=100% height=100% >"+content+"</textarea>" )
				.appendTo( "body" );
			setTimeout(function() {
				code.dialog({
					title: title,
					width: 400,
					height:400,
					modal: true,
					buttons: {
						"提交修改": function() {
						},
						"运行": function() {
						},
						"取消": function() {
						}
					}
						
				});
			}, 1 );
			
		}

		// resolve the icons behavior with event delegation
		$( "ul.gallery > li" ).click(function( event ) {
			var $item = $( this ),
				$target = $( event.target );

			if ( $target.is( "a.ui-icon-trash" ) ) {
				deleteImage( $item );
				
			// 代码段最大化
			} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
				viewLargerImage( $target );
			}

			return false;
		});
		
		
	});
	
	//拼装后 删除代码段
	function deleteImage( $item ,$offset) {
		dragObject = $item;
		$( "#dialog-assembly-confirm" ).dialog( "open" );
	}
	
	//添加一段code，并且为这个页面组件添加拖动事件，以及被其他组件停靠事件
	function addCode (title,code) {
		var code_id = "gallery"+cur_insert_code_id+"";
		var str = 
		'<li id="'+code_id+'"" class="ui-widget-content ui-corner-tr">'+
		'<h5 class="ui-widget-header">'+title+'</h5>'+
		'<textarea name="text1" >'+code+'</textarea>'+
		'<a id="larger'+code_id+'" href="images/high_tatras.jpg" title="View larger code" class="ui-icon ui-icon-zoomin">View larger</a>'+
		'<a href="link/to/trash/script/when/we/have/js/off" title="Delete this code" class="ui-icon ui-icon-trash">Delete image</a>'+
		'</li>';
		
		$("#gallery").append (str);
		
		//添加拖动事件
		
		$( "#"+code_id+"" ).draggable({
			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
			revert: "invalid", // when not dropped, the item will revert back to its initial position
			helper: "clone",
			cursor: "move",
			containment: "container"
			
		});

		// let the trash be droppable, accepting the gallery items

		//添加停靠事件

		$( "#"+code_id+"" ).droppable({
			accept: "#gallery  li",
			activeClass: "ui-state-highlight",
			drop: function( event, ui ) {
				deleteImage( ui.draggable ,ui.offset);
			}
		});
		$( "#larger"+code_id+"" ).click(function( event ) {
			var $item = $( this ),
				$target = $( event.target );
			viewLargerImage( $target );

			return false;
		});
				// image preview function, demonstrating the ui.dialog used as a modal window
		function viewLargerImage( $link ) {
			var title = $link.siblings( "h5" ).text(),
				content = $link.siblings( "textarea").text();

			var code = $( "<textarea  width=100% height=100% >"+content+"</textarea>" )
				.appendTo( "body" );
			setTimeout(function() {
				code.dialog({
					title: title,
					width: 400,
					height:400,
					modal: true,
					buttons: {
						"提交修改": function() {
						},
						"运行": function() {
						},
						"取消": function() {
						}
					}
						
				});
			}, 1 );
			
		}
		cur_insert_code_id ++;
	}
	</script>
</head>
<body>
<h2>当前账户：Queenylv <a href="#">注销</a></h2>
<div id="accordionResizer" style="padding:10px; height:auto;" class="ui-widget-content">

<div id="accordion">
	<h3><a href="#">code assembly</a></h3>
	<div id="container">
		
		<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
			<li id="gallery1" class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">code title 1</h5>
				<textarea name="text1" >code content 1</textarea>
				<a href="images/high_tatras.jpg" title="View larger code" class="ui-icon ui-icon-zoomin">View larger</a>
				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this code" class="ui-icon ui-icon-trash">Delete image</a>
			</li>
			<li id="gallery2" class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">code title 2</h5>
				<textarea name="text1" >code content 2</textarea>
				<a href="images/high_tatras2.jpg" title="View larger code" class="ui-icon ui-icon-zoomin">View larger</a>
				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this code" class="ui-icon ui-icon-trash">Delete image</a>
			</li>
			<li id="gallery3" class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">code title 3</h5>
				<textarea name="text1" >code content 3</textarea>
				<a href="images/high_tatras3.jpg" title="View larger code" class="ui-icon ui-icon-zoomin">View larger</a>
				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this code" class="ui-icon ui-icon-trash">Delete image</a>
			</li>
			<li id="gallery4" class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">code title 4</h5>
				<textarea name="text1" >code content 4</textarea>
				<a href="images/high_tatras4.jpg" title="View larger code" class="ui-icon ui-icon-zoomin">View larger</a>
				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this code" class="ui-icon ui-icon-trash">Delete image</a>
			</li>
		</ul>
	</div>
	<h3 id="head_1"><a href="#">insert a code</a></h3>
	<div>
		<div style="width:400px; height:auto;">
		<p>
			<label for="name">标题</label>
			<input type="title" name="name" id="insert_title"  style="width:100%; height:20px;"/>
		</p>
			<br/>
		<p>
			<label for="email">代码 </label>
			<textarea id="insert_code" value="" style="width:100%; height:300px;" ></textarea>
		</p>
		<p>
			<button id="code_submit"style="float:right">提交</button>
		</p>
		</div>
	</div>
	
</div>
<div id="dialog-assembly-confirm" title="提示">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>确定将拖动的代码拼装吗？此操作不可逆</p>
</div>

<div id="dialog-submit-confirm" title="提示">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>确定提交代码吗？</p>
</div>


<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
</div><!-- End accordionResizer -->
</body>
</html>
